<template>
  <view class="page">
    <up-navbar :placeholder="true" :autoBack="true">
      <template #center>
        <image :src="IMAGE_URL +
          '/profile/content/2025/05/16/b5ZIL11SPPB22cc2401bb7ac1e638a2cd108351c6588_20250516132506A006.png'
          " style="width: 100%" mode="aspectFill"></image>
      </template>
    </up-navbar>
    <!-- 顶部背景和个人信息 -->
    <view class="profile-header">
      <view class="user-info flex">
        <u-avatar size="70" :src="state.userInfo.avatar
          ? IMAGE_URL + state.userInfo?.avatar
          : '/static/images/icon-avatar-default.png'
          "></u-avatar>
        <view class="info-content">
          <view class="name-wrap">
            <up-text size="16" :text="state.userInfo.nickname"></up-text>
          </view>
          <view class="counts">
            <view class="count-item">
              <text class="num">{{ state.userInfo.followersCount }}</text>
              <text class="label">粉丝</text>
            </view>
            <view class="count-item">
              <text class="num">{{ state.userInfo.followingCount }}</text>
              <text class="label">关注</text>
            </view>
            <view class="count-item">
              <text class="num">{{ state.userInfo.interactionCount }}</text>
              <text class="label">转评赞</text>
            </view>
          </view>
        </view>
      </view>

      <up-text size="12" color="#3D511D" :text="state.userInfo.bio" margin="20rpx"></up-text>
      <!-- <up-text
        size="12"
        color="#B7B7B7"
        text="更多资料"
        align="center"
      ></up-text> -->
    </view>
    <view class="main padding-0">
      <!-- 选项卡 -->
      <u-tabs lineColor="#9CB95A" bgColor="#fff" :is-scroll="false" :list="state.tabList"
        v-model="state.currentTab"></u-tabs>

      <!-- 动态列表 -->
      <view class="posts-list">
        <view class="post-item" v-for="post in state.posts" :key="post.id">
          <view class="post-header">
            <u-avatar size="30" :src="post.avatar
              ? IMAGE_URL + post?.avatar
              : '/static/images/icon-avatar-default.png'
              "></u-avatar>
            <view class="margin-left-sm">
              <up-text size="12" color="#20280F" :text="post.nickname"></up-text>
              <up-text size="9" color="#666" :text="post.timeAgo"></up-text>
            </view>
          </view>
          <view class="post-content">{{ post.content }}</view>
          <!-- 内容图片 -->
          <view v-if="post?.images" class="padding-lr bg-white">
            <u-album :rowCount="4" :urls="getUrls(post.images)"></u-album>
          </view>
          <!-- <image v-if="post.image" class="post-image" :src="post.image" mode="aspectFill"></image> -->
          <view class="post-actions">
            <view class="action-item" @click="sharePost(post.id)">
              <u-icon name="/static/images/icon-share.png" size="40rpx"></u-icon>
              <text>转发</text>
            </view>
            <view class="action-item" @click.stop="todoComment(post.id)">
              <u-icon name="/static/images/icon-comment.png" size="40rpx"></u-icon>
              <text>评论</text>
            </view>
            <view class="action-item">
              <u-icon name="/static/images/icon-heart-red.png" size="40rpx"></u-icon>
              <text>赞</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 赞赏作者 -->
      <up-modal title="赞赏作者" confirmColor="#9CB95A" :showCancelButton="true" :show="showPointModel"
        @cancel="showPointModel = false" @confirm="confirmReward">
        <view class="text-left" style="width: 100%">
          <text class="text-lg">积分赞赏</text>
          <view class="point-box">
            <view class="point-item" :class="{ active: currentPoint === i }" v-for="i in 5" :key="i"
              @click="currentPoint = i">
              {{ i + 1 }}
            </view>
          </view>
        </view>
        <template #popupBottom>
          <view class="rounded" style="margin-top: 20px" @click="show10 = false">
            <up-icon name="close" color="#fff"></up-icon>
          </view>
        </template>
      </up-modal>
    </view>

    <view class="footer align-center justify-center" v-if="!currentId">
      <view class="flex flex-sub">
        <!-- <view class="text-center">
          <up-icon
            name="/static/images/icon-comment.png"
            size="20"
            color="#B7B7B7"
          ></up-icon>
          <up-text
            color="#B7B7B7"
            text="留言"
            size="12"
            @click="toMessage"
          ></up-text>
        </view> -->
        <view class="margin-left-xl text-center" @click="showPointModel = true">
          <up-icon name="/static/images/icon-reward.png" size="20" color="#B7B7B7"></up-icon>
          <up-text color="#B7B7B7" text="赞赏" size="12"></up-text>
        </view>
      </view>

      <!-- 关注按钮 -->
      <view class="flex-sub">
        <view class="flex flex-direction align-center justify-center" @click="toggleFollow"
          v-if="state.userInfo.isFollowing">
          <up-icon name="/static/images/icon-focus.png" size="20" color="#B7B7B7"></up-icon>
          <up-text size="12" color="#B7B7B7" text="正在关注" align="center"></up-text>
        </view>
        <view class="follow-btn" @click="toggleFollow" v-else>
          关注
        </view>
      </view>
    </view>
    <!-- 发表评论 -->
    <view class="footer flex bg-white" v-if="currentId">
      <view class="flex-sub">
        <up-input placeholder="评论" v-model="commentContent"></up-input>
      </view>
      <view class="margin-left-xs flex">
        <up-button type="primary" size="mini" text="发送" customStyle="width: 50px !important" :disabled="!commentContent"
          @click="postComment"></up-button>
        <up-button size="mini" text="取消" customStyle="width: 50px !important;margin-left:10px"
          @click="closeCommentPanel"></up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { IMAGE_URL } from '@/utils/env';
import { onLoad } from '@dcloudio/uni-app';
import {
  getCommunityApi,
  likeApi,
  cancelLikeApi,
  commentApi,
  getCommentApi,
  followAuthApi,
  cancelFollowAuthApi,
  getFollowContentApi,
  commentIndexApi,
  userPostApi,
  postRewardApi
} from '@/api/community.js';
const currentId = ref(''); //当前选中的帖子ID，用户回复或转发时使用；
const commentContent = ref(''); //评论内容
const currentPoint = ref(1);
const showPointModel = ref(false);
let userId = ref('');
const state = reactive({
  userInfo: {},
  currentTab: 0,
  tabList: [{ name: '动态' }],
  posts: []
});

onLoad((options) => {
  userId.value = options.id;
  commentIndex();
  userPost();
});
const getUrls = (images) => {
  if (!images) return [];
  return images.split(',').map((item) => IMAGE_URL + item);
};
const commentIndex = async () => {
  const params = {
    userId: userId.value
  };
  const result = await commentIndexApi(params);
  if (result.code === 200) {
    state.userInfo = result.data;
  }
};

const userPost = async () => {
  const params = {
    userId: userId.value
  };
  const result = await userPostApi(params);
  if (result.code === 200) {
    state.posts = result.rows;
  }
};
const toggleFollow = () => {
  if (state.userInfo.isFollowing) {
    handleUnFollow();
  } else {
    handleFollow();
  }
  state.isFollowing = !state.isFollowing;
  uni.showToast({
    title: state.isFollowing ? '已关注' : '已取消关注',
    icon: 'none'
  });
};
// 关注作者
const handleFollow = async () => {
  const result = await followAuthApi(state.userInfo.userId);
  if (result.code === 200) {
    state.userInfo.isFollowing = true;
  } else {
    uni.showToast({
      title: result.msg,
      icon: 'none'
    });
  }
};
// 取关作者
const handleUnFollow = async () => {
  const result = await cancelFollowAuthApi(state.userInfo.userId);
  if (result.code === 200) {
    state.userInfo.isFollowing = false;
  } else {
    uni.showToast({
      title: result.msg,
      icon: 'none'
    });
  }
};
// 准备评论
const todoComment = (id) => {
  currentId.value = id;
  uni.hideTabBar();
};
// 发送评论
const postComment = async () => {
  const params = {
    id: currentId.value,
    comment: commentContent.value
  };
  const result = await commentApi(params);
  if (result.code === 200) {
    uni.$u.toast('评论成功!');
    uni.showTabBar();
    currentId.value = 0;
    commentContent.value = '';
    getCommunity();
  }
};
// 关闭发表评论
const closeCommentPanel = () => {
  currentId.value = '';
  uni.showTabBar();
};
const confirmReward = async () => {
  showPointModel.value = false;
  const params = {
    receiverId: state.userInfo.userId,
    points: currentPoint.value
  };
  const result = await postRewardApi(params);
  if (result.code === 200) {
    uni.showToast({
      title: '打赏成功',
      icon: 'none'
    });
  }
};
const toMessage = () => {
  uni.navigateTo({
    url: '/pages-sub/me/message'
  });
};
// 转发
const sharePost = async (id) => {
  uni.navigateTo({
    url: '/pages/community/share?id=' + id
  });
};
</script>

<style lang="scss">
.page {
  background-color: #f8f8f8;
}

.profile-header {
  position: relative;
  z-index: 9999;
  margin-top: 130rpx;
  padding: 0 30rpx;
  background: white;
}

.user-info {
  position: relative;
  // padding: 20rpx;

  .u-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    position: absolute;
    top: -35%;
  }

  .info-content {
    margin-top: 30rpx;
    margin-left: 160rpx;
    flex: 1;
  }

  .name-wrap {
    display: flex;
    align-items: center;

    .name {
      font-size: 32rpx;
      font-weight: bold;
    }

    .tag {
      font-size: 24rpx;
      color: #666;
      margin-left: 10rpx;
    }

    .verified {
      width: 30rpx;
      height: 30rpx;
      margin-left: 10rpx;
    }
  }

  .counts {
    display: flex;
    margin-top: 20rpx;

    .count-item {
      margin-right: 40rpx;
      flex: 1;

      .num {
        font-weight: bold;
        font-size: 24rpx;
      }

      .label {
        font-size: 24rpx;
        color: #666;
        margin-left: 6rpx;
      }
    }
  }

  .bio {
    margin-top: 20rpx;
    color: #333;
    font-size: 28rpx;
    padding: 0 30rpx;
  }

  .more {
    margin-top: 10rpx;
    color: #999;
    font-size: 24rpx;
  }
}

.posts-list {
  margin-top: 40rpx;

  .post-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .post-header {
      display: flex;
      align-items: center;

      .post-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }

      .post-info {
        margin-left: 20rpx;

        .post-name {
          font-size: 28rpx;
          font-weight: bold;
        }

        .post-time {
          font-size: 24rpx;
          color: #999;
        }
      }
    }

    .post-content {
      margin: 20rpx 0;
      font-size: 28rpx;
    }

    .post-image {
      width: 100%;
      height: 400rpx;
      border-radius: 8rpx;
    }

    .post-actions {
      display: flex;
      justify-content: space-around;
      margin-top: 20rpx;

      .action-item {
        display: flex;
        align-items: center;
        color: #666;

        text {
          margin-left: 6rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}

.follow-btn {
  border-radius: 50px;
  background: linear-gradient(94deg,
      #d4e9a2 -41.12%,
      rgba(184, 211, 122, 0.8) -14.02%,
      rgba(210, 233, 158, 0.9) 20.82%,
      rgba(201, 236, 124, 0.9) 58.24%,
      #e9ffb8 85.33%);
  color: #3d511d;
  font-size: 24rpx;
  width: 100%;
  padding: 20rpx 0;
  text-align: center;
  font-weight: bold;
}

.point-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-top: 20rpx;

  .point-item {
    border: solid 1px #f0f0f0;
    padding: 20rpx 0;
    text-align: center;

    &.active {
      border: solid 1px #99e458;
    }
  }
}
</style>
